<template>
	<view class="home">
		<view class="list uni-flex uni-column">
			<view class="wrap-item">
				<view class="lis uni-flex uni-column" :animation="animationData">
					<view class="uni-flex uni-column" v-for="(item, index) in list" :key="index">
						<view class="swiper-item item_title uni-flex list_item flex">
							<view class="time uni-flex-item justify-align-center uni-flex">恭喜</view>
							<view class="phone uni-flex-item justify-align-center uni-flex">{{ item.userName | tuomin }}</view>
							<view class="prizes uni-flex-item justify-align-center uni-flex">{{ item.remark }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { formDateToString } from '@/common/utils/date.js';
export default {
	props: {
		list: {
			type: Array
		}
	},
	data() {
		return {
			scrollHeight: 0, //向上滚动距离
			height: 0, //.lis高度（滚动框高度）
			animationData: {}, //动画对象
			alStart: false //是否已经开始
		};
	},
	components: {},
	mounted() {
		// if (this.list.length > 5) {
		//   this.prizeScroll();
		// }
	},
	methods: {
		getStr(value){
			if(value){
				return formDateToString(new Date(value.replace(/-/g,'/')))
			}
		},
		getHeight(Class) {
			let query = uni.createSelectorQuery().in(this);
			query
				.selectAll(Class)
				.boundingClientRect(data => {
					this.height = data[0].height;
				})
				.exec();
		},
		prizeScroll() {
			if (this.alStart) {
				return;
			}
			this.alStart = true;
			let speed = 100;
			let animation = uni.createAnimation({
				duration: this.getHeight('.lis') / speed,
				timingFunction: 'linear',
				delay: 0
			});
			this.animation = animation;
			setInterval(() => {
				if (this.scrollHeight >= this.height - 150) {
					animation.translateY(0).step();
					this.scrollHeight = 0;
					this.animationData = animation.export();
				} else {
					this.scrollHeight = this.scrollHeight + 1;
					animation.translateY(-this.scrollHeight).step();
					this.animationData = animation.export();
				}
			}, speed);
		}
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
}
.home,
.list {
	width: 100%;
	//   padding-top: 30upx;
}
.list_item {
	font-size: R(28px);
	font-family: Adobe Heiti Std;
	font-weight: normal;
	// color: #f97f3d;
	padding: R(20) R(30);
	justify-content: space-between;
	.time{
		display: inline-block;
		width: R(100);
		text-align: center;
	}
	.phone{
		display: inline-block;
		width: R(200);
		text-align: center;
	}
	.prizes{
		display: inline-block;
		width: R(300);
		text-align: center;
	}
}
</style>
